<template>
	<view>
		<view class="userInfoBox bb" @click="toMy()">
			<image src="../../static/images/user.png" class="avatarBox" v-if="!isLogin"></image>
			<image :src="userinfo.avatarUrl" class="avatarBox" v-else @click="changeAvatar"></image>
			<view class="name single-line">{{isLogin ? userinfo.nickName : '请登录'}}</view>
<!-- 			<view class="address" @click="copyId">id: {{ userinfo.id || ' -' }}</view> -->
		</view>
		<view class="Subject">
			<view class="commonFunctionsBox" style="height: 634rpx;">
				<view class="title">常用功能</view>
				<view class="flex flex-wrap">
					<view class="flex-col flex-col-center" style="width: 25%;margin: 48rpx 0 0 0;"
						v-for="item,index in CommonlyUsedFunctionsArr" :key="item.icon"
						@click="onCommonlyUsedFunction(index)">
						<image style="width: 48rpx;height: 48rpx;" :src="'../../static/images/my/' + item.icon + '.png'"
							mode=""></image>
						<view style="font-size: 20rpx;font-weight: 400;color: #323233;margin-top: 8rpx;">{{item.label}}
						</view>
					</view>
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<!-- #endif -->
		</view>
		<!-- #ifdef MP-WEIXIN -->
		<wxmpLogin @changeLoginStatus="changeLoginStatus" v-if="!isLogin" />
		<!-- #endif -->
		<!-- #ifdef MP-ALIPAY -->
		<alimpLogin @changeLoginStatus="changeLoginStatus" v-if="!isLogin" />
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		wxmpLogin
	} from '../../components/wxmpLogin/wxmpLogin.vue'
	import {
		alimpLogin
	} from '../../components/alimpLogin/alimpLogin.vue'
	import {
		getMyInfo,
		scanLoginQrCode,
		qrCodeLoginConfirmation
	} from '../../network/api.js'
	export default {
		components: {
			wxmpLogin,
			alimpLogin
		},
		data() {
			return {
				CommonlyUsedFunctionsArr: [{
						icon: 'switchuser@2x',
						label: '邀请记录',
					},
					{
						icon: 'swap@2x',
						label: '我的订单',
					},
					{
						icon: 'parkinglot@2x',
						label: '我的二维码',
					},
					{
						icon: 'setting@2x',
						label: '个人设置',
					}
				],
				code: '',
				isLogin: false,
				userinfo: {
					id: '',
					avatarUrl: '',
					nickName: '',
					phone: ''
				},
				user_id:''
			}
		},
		onShow() {
			if (uni.getStorageSync('user_id')) {
				this.isLogin = true
				this.user_id=uni.getStorageSync('user_id')
				this.getMyUserInfo(uni.getStorageSync('user_id'))
			} else {
				this.isLogin = false
			}
		},
		methods: {
			copyId() {
				uni.setClipboardData({
					data: this.userinfo.id
				})
			},
			toMy(){
				uni.navigateTo({
					url:'/pages/my/setMyInfo',
				});
			},
			async getMyUserInfo() {
				const {
					data,
					code
				} = await getMyInfo({
					user_id: this.user_id
				})
				if (code == 200) {
					console.log(999)
					this.userinfo.id = data.id
					this.userinfo.avatarUrl = data.avatar
					this.userinfo.nickName = data.nickname
					this.userinfo.phone = data.mobile
				}
			},
			changeLoginStatus(e) {
				if (e) {
					this.isLogin = true
					this.getMyUserInfo(this.user_id)
				} else {
					this.isLogin = false
				}
			},
			onCommonlyUsedFunction(index) {
				const pages = [
					//'/pages/parkPay_input/parkPay_input',
					'/pages/parkingRecords/parkingRecords',
					// #ifdef MP-WEIXIN
					//'/pages/chargeDetail/order',
					// #endif
					//'/pages/myCar/myCar',
					// #ifdef MP-WEIXIN
					//'/pages/my/monthlyCardPackage',
					//'/pages/my/myWallet',
					// #endif
					'/pages/my/orderList',
					'/pages/my/emergency',
					'/pages/my/setMyInfo',
					//'/pages/coupon/index',
					//'/pages/my/myCoupon',
					// #ifdef MP-WEIXIN
					//'/pages/my/storedValueCard',
					//'/pages/my/chargingStoredValueCard',
					// #endif
					// '/pages/bluetoothTest/bluetoothTest'
				];
				// if (index == this.CommonlyUsedFunctionsArr.length - 1) {
				// 	this.onScan()
				// 	return
				// }
				if (index >= 0 && index < pages.length) {
					uni.navigateTo({
						url: pages[index]
					});
				} else {
					console.log("Invalid index");
				}
			},
			changeAvatar() {
				// uni.chooseMedia({
				// 	count: 1,
				// 	mediaType: ['image'],
				// 	success: (res) => {
				// 		console.log(res);
				// 		uni.editImage({
				// 			src: res.tempFiles[0].tempFilePath
				// 		})
				// 	}
				// })
			}
		}
	}
</script>

<style lang="scss">
	page {
		background: #F5F7FF;
	}

	.Subject {
		position: absolute;
		top: 520rpx;
		left: 32rpx;
	}

	.commonFunctionsBox {
		width: 686rpx;
		height: 248rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		overflow: hidden;
		margin: 32rpx 0 32rpx 0;

		.title {
			height: 44rpx;
			font-size: 32rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #323233;
			line-height: 44rpx;
			margin: 32rpx 0 0 32rpx;
		}
	}

	.serveInfoBox {
		width: 686rpx;
		height: 142rpx;
		background: #FFFFFF;
		border-radius: 18rpx;
		position: relative;

		.line {
			width: 2rpx;
			height: 36rpx;
			background: #DDE0EC;
			border-radius: 1rpx;
			position: absolute;
			top: 54rpx;
			left: 342rpx;
		}
	}

	.userInfoBox {
		width: 750rpx;
		height: 582rpx;
		background-image: url('../../static/images/myBG@2x.png');
		background-size: 100% 100%;
		padding: 0 32rpx;
	}

	.avatarBox {
		width: 160rpx;
		height: 160rpx;
		border: 8rpx solid #FFFFFF;
		border-radius: 50%;
		margin-top: 174rpx;
		background: #FFFFFF;
	}

	.name {
		width: 100%;
		height: 66rpx;
		font-size: 48rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 66rpx;
		margin-top: 24rpx;
	}

	.address {
		height: 34rpx;
		font-size: 24rpx;
		font-weight: 600;
		color: #FFFFFF;
		line-height: 34rpx;
		margin-top: 12rpx;
	}
</style>